<template>
  <div class="bodys">
    <Header :headerTxt="$t('ws_transition.buy')" :showBack="true"></Header>
    <div class="top">

    </div>
    <div class="mid">
    ws_transition:{
      <p class="pnumber"><span>{{$t('ws_transition.buyQ')}}</span><span>{{this.$route.query.count}}</span></p>
      <p class="pmoney"><span>{{$t('ws_transition.payQ')}}</span><span>{{this.$route.query.count}}</span></p>
      <p class="padress"><span>{{$t('ws_transition.paymentAddress')}}</span><input v-model="address" :placeholder="$t('ws_transition.addre')"/></p>
    </div>
    <p class="annotation">{{$t('ws_transition.aa')}}</p>
    <el-button type="primary" @click="income">买入</el-button>
  </div>
</template>
<script>
import Header from "@/components/Header";
import { income } from '@/api/getData';
export default {
  data() {
    return {
      address:'',
      count:this.$route.query.count,
      user:JSON.parse(sessionStorage.getItem("user")),

    };
  },
  methods: {
    income(){
            let data = {
                user_id: this.user.user_id,
                money: this.count,
                addr:this.address
            }
            income(data).then(res => {
                if(res.data.result == 200){
                   if(localStorage.lang == 'cn'){
                    this.$message({
                      type: 'success',
                      message: "充值成功，等待后台管理员审核！",
                      duration: 1500,
                      showClose: true
                    })}else{
                      this.$message({
                      type: 'success',
                      message: "Recharge is successful, waiting for the background administrator to review！",
                      duration: 1500,
                      showClose: true
                    })
                    };
                this.$router.push("/trade")
                }else{
                   if(localStorage.lang == 'cn'){
                  this.$message({
                    type: 'error',
                    message: "充值失败，请联系客服处理！",
                    duration: 1500,
                    showClose: true
                  })}else{
                     this.$message({
                    type: 'error',
                    message: "Recharge failed, please contact customer service！",
                    duration: 1500,
                    showClose: true
                  })
                  };
                  this.$router.push("/trade")
                }
            })


    }
  },
  mounted() {
  },
  components: {
    Header
  }
};
</script>
<style lang="stylus" scoped>
* {
  margin: 0;
  padding: 0;
}
.bodys {
  width: 100%;
  height: 100vh;
  background: #F8F8FF;
  font-size: 0.35rem;
}
.top{

  height:10vh;
  .ptittle{
    background:rgb(228, 231, 237);
    width:100vw;
    height:8vh;
    line-height :8vh;
    text-indent :.2rem;
    font-size:.35rem;
    font-weight :400;
  }
  .pmid{
    width:100vw;
    height:5vh;
    text-indent :.2rem;
    font-size:.65rem;
    color:#409EFF;
  }
  .pmids{
    width:100vw;
    height:5vh;
    text-indent :.2rem;
    font-size:.3rem;
    margin-top:.2rem;
    color:#409EFF;
  }
  .pbottom{
    text-indent :.2rem;
    margin-top :.1rem;
    color:#999999
  }
}
.mid{
  margin-top:.3rem;
  background:#fff;
  height:21vh;
  >p{
    border-bottom:1px solid rgba(153 153 153 .4);
    display :flex;
    justify-content :space-between;
    text-indent :.2rem;
    height:7vh
    >span{
      margin-right :.4rem;
    }
    
      >input{
        outline :none;
        border:none;
        width:65%;
        padding-right:5%;
      }
    align-items :center;
    font-weight :500;
    font-size:15px;
  }
  .padress{
    border:none
  }
}
.annotation{
   text-indent :.2rem;
   margin-top:.3rem;
   font-size:12px;
   color:#999999
}
.el-button{
  width:70vw;
  height :5.5vh;
  margin-top:.3rem;
  margin-left :15vw;
}
</style>
